<script setup>
import { ref,computed,watch } from 'vue';
import LoginUser from '@/components/loginUser.vue';
import logo from '@/assets/image/logo.svg'
import qrcode from '@/assets/image/qrcode.png'
const type = ref('0'); // 0: 短信 ， 1：密码，2：微信，3：占位

const wayList = ref([
    {index:0,name:'短信',icon:logo},
    {index:1,name:'密码',icon:logo},
    {index:2,name:'微信',icon:logo},
    {index:3,name:'占位',icon:logo},
  ])

// 标题

const currentTitle = computed(()=>{
  const currentObj = wayList.value.find((item,index)=> index == type.value)
  return currentObj.name
})

const otherWay = ref([])

watch(()=>currentTitle.value,(newV)=>{
  otherWay.value = wayList.value.filter((item)=>{
    return item.name !== newV
  })
},{immediate:true})

const switchMode = (val)=>{
  console.log(val)
  type.value = val
}

</script>
<template >
  <div id="login">
  <div class="login-container">
    <div class="left-container info-card ">
      <div class="left-header">
        <img style="width: 25px;height: 25px;" :src="qrcode"/>
        <div style="font-weight: 700;">一知新科技集团</div>
      </div>
      <div>
      <div class="title">
        <div>AI+教育+</div>
        <div>培训课程平台后台管理系统</div>
      </div>
      <div class="text" style="margin-top: -50px;">一键掌控订单全流程，智能管理合作生态，开启培训平台高效运营新篇</div>
      </div>
      <div class="text" style="position: absolute;bottom: 50px;">版本号 V20251234.12345</div>
    </div>
    <div class="right-container">
      <div class="flex-column">
        <div class=" flex-between">
          <div class="top-title">
            {{ currentTitle }}登录
          </div>
        </div>
        <div style="width:60%;margin:auto;"><login-user ></login-user></div>
        <div class="tip-container">
          <div class="tip">
            <hr class="middle-line"></hr>
            <div >其他登录方式</div>
            <hr class="middle-line"></hr>
          </div>
          <div class="way">
            <div class="tipDrop" v-for="(item,index) in otherWay" :key="index">
              <el-image class="image" :src="item.icon"  @click="switchMode(item.index)" />
              <div class="switch" >{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<style lang="less" scoped>
.login-container {
  display: flex;
  height: 100vh;
  background-color: rgba(0, 64, 255, 0.05);
  // background: url('@/assets/image/login-bg.png') no-repeat;
  background-size: 100% 100%;
  gap: 52px;

  .left-container {
    width: 50%;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .right-container {
    padding: 9% 38px 0;
    flex: 1;
    display: flex;
    align-items: center;
    .flex-column{
      width: 100%;
      .way{
        display: flex;
        justify-content: center;
        text-align: center;
        .image{
          width: 20px;
          height: 20px;
          padding: 15px;
          border-radius: 50%;
          background-color: #242234;
        }
      }
      .top-title{
        text-align: center;
        margin:30px 0;
        font-size: 24px;
      }
      .tipDrop{
        margin:0 2%;
      }
      .tip{
        padding: 0 0 40px;
        color: gray;
        display: flex;
        justify-content:center;
        .middle-line{
          width: 20%;
          padding: 0;
          height: 0;
          margin: 10px 20px;
          text-decoration:line-through;
        }
      }
    }

  }

  .left-header {
    display: flex;
    column-gap: 25px;
    padding: 48px;
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .info-card {
    background: url('@/assets/image/login-bg.png') no-repeat;
    margin: 30px;
    border-radius: 48px;
    display: flex;
    justify-content: center;
    backdrop-filter: blur(24px);
    position: relative;

    .flex-between{
      width: 100%;
      display: flex;
      justify-content:center;
      align-items: end;
      position: absolute;
      top: 0;
      height: 25.7%;
      margin-bottom: min(5%,20px);
      .top-title{
        text-align: center;
      }
    }

    .img {
      width: 24px;
      height: 24px;
    }

    .tip-container{
      width: 43.5%;
      height: 23.5%;
      padding-bottom: min(6.5%,64px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: 0;

      .tip {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: start;
      }

      .tip::before, .tip::after {
        content: '';
        width: 30%;
        height: 1px;
        background-color: gray;
        opacity: 0.5;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      .tip::before {
        left: 0;
      }

      .tip::after {
        right: 0;
      }

      .tip .text {
        color: gray;
      }
      .tipDrop{
        position: absolute;
        width: 48px;
        height: 48px;
        top:45%;
        background-color:#000000;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        .image{
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .switch{
    margin-top: max(10px,5%);
    color: grey;
  }

  .title {
    font-family: PangMenZhengDao;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 1.5;
    padding: 348px 48px 40px 48px;
    > div {
      font-family: PangMenZhengDao;
    }
  }

  .text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 4px 16px rgba(6, 54, 121, 0.4);
    padding: 30px 48px;
  }
}
</style>
